iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0

<path>指令

  • 接下來詳細介紹指令,每個命令都用一個關鍵字代表
  • 大寫指令表示絕對定位;小寫指令表示相對定位
  • 參數部分,空白分隔的為一組,逗號則是有兩組以上,將組做分隔

M/m:路徑起始點

指令 | 意思| 參數 | 說明
------------- | -------------
M/m | moveto | x y | 路徑起始點的(x,y)座標

<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100"/>
</svg>

如下圖,因為只有一個點,正常為看不到東西,圖為示意圖,代表點的位置
https://ithelp.ithome.com.tw/upload/images/20181103/20111500PRViyAvadB.jpg

Z/z:封閉路徑

指令 | 意思| 參數 | 說明
------------- | -------------
Z/z | closepath | 無 |加上Z即將路徑變為封閉路徑,將當前座標跟第一個座標連起來

直線指令

L/l:直線

指令 | 意思| 參數 | 說明
------------- | -------------
L/l | lineto | x y | 從當前座標畫直線到路徑終點的(x,y)座標

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  L200 200" stroke="black"/>
</svg>

如下圖,路徑拉直線到了座標(200,200)
https://ithelp.ithome.com.tw/upload/images/20181103/20111500qvQFWv23Xm.jpg

H/h:水平直線

指令 | 意思| 參數 | 說明
------------- | -------------
H/h | horizontal lineto| x | 從當前座標畫水平線到路徑終指定的x軸座標

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  H200" stroke="black"/>
</svg>

如下圖,只有x座標移動到x=200的位置,y軸維持y=100
https://ithelp.ithome.com.tw/upload/images/20181103/20111500KXuqrXOdV4.jpg

V/v:垂直直線

指令 | 意思| 參數 | 說明
------------- | -------------
V/v | vertical lineto| y | 從當前座標畫垂直線到路徑終指定的y軸座標

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  V200" stroke="black"/>
</svg>

如下圖,只有y座標移動到y=200的位置,x軸維持x=100
https://ithelp.ithome.com.tw/upload/images/20181103/20111500oCFVTSyAkf.jpg

曲線指令

C/C:曲線

指令 | 意思| 參數 | 說明
------------- | -------------
C/c | curveto| x1 y1 x2 y2 x y | 從當前座標畫曲線到曲線終點的(x,y)座標,(x1,y1)及(x2,y2)為控制點

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  C120 150,200 150, 200 200" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500J2JkzeMVG1.jpg

S/s:反射曲線

指令 | 意思| 參數 | 說明
------------- | -------------
S/s | smooth curveto | x2 y2 x y |從當前座標畫反射曲線到曲線終點的(x,y)座標,(x2,y2)為反射控制點

  • 如單獨S指令,兩個控制點就會為同一個點
  • 如S指令前接著C指令,它的第一個控制點就會被假設成前一個控制點的對稱點,即會以和前一控制點同一斜率產生一個虛擬的反射點
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  C120 150,200 150, 300 200 S450 -150, 500 100" stroke="black" fill="transparent"/>
</svg>
<!-- 僅為示意程式碼,跟下方圖片呈現曲線不相同 -->

https://ithelp.ithome.com.tw/upload/images/20181103/20111500LFrTE9fUfw.jpg

Q/q:二次貝茲曲線

指令 | 意思| 參數 | 說明
------------- | -------------
Q/q | quadratic Bézier curve| x1 y1 x y | 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,(x1,y1)為控制點
Q較前兩個曲線指令簡單許多,只用一個控制點來控制曲線的斜率

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500gh9EcfVTd4.jpg

T/t:二次反射貝茲曲線

指令 | 意思| 參數 | 說明
------------- | -------------
T/t | smooth quadratic Bézier curveto | x y |從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,前一個座標為反射控制點
與S指令類似,控制點為前一個控制點的反射點(同一斜率)

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100 T300 100" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500V0x4tVvHhg.jpg
[補充]
控制點類似Illustor的把手當前座標終點座標類似Illustor的錨點,而QT指令的控制點類似Illustor按alt+把手(閉合錨點控制)
https://ithelp.ithome.com.tw/upload/images/20181103/20111500zvJECCznmS.png

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
[2]https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html


上一篇
SVG-path(一)概念
下一篇
SVG-path(三)弧形指令:A
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言